import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import classnames from 'classnames';
import ReactDOM from "react-dom";
import { Modal, Button } from 'antd';
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

let postilStore = null;
@inject("postilStore")
@observer
export default class Postil extends React.Component{

  static getCurrentStore = () => {
    return postilStore;
  }

  componentDidMount() {
    postilStore = this.props.postilStore;
    // document.addEventListener('click', this.checkBlur)
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (this.props.postilStore.show) {
      document.getElementById("postil").style.display = "block";
    } else {
      document.getElementById("postil").style.display = "none";
    }
  }

  render() {
    const {postilStore} = this.props;
    const {show, list, isEdit, text, chooseItemIds,showCloseId, setState, delModalVisible, delIds, isDelPostil, doDeletePostil, delPosModalVisible, dodeleteAllPostil, deletePostil} = postilStore;
    return (
      <div className="postil-container" style={{display: show ? "block":"none"}}>
        {list.length > 0 && <div className="revise-title">
          <div className="title-name">批注</div>
          <div className="title-number">{list.length}处批注</div>
        </div>}
        {isEdit && <div className="postilItem creatPostil">
          <div className="headPortrait">
            <span className="odoc_author" id="author">{CKEditorParams.author}</span>
          </div>
          <div className="postilContent">
            <textarea ref={(x) => postilStore.setState({textareaRef: x})} className="postilText" value={text} onChange={(e) => postilStore.setState({text: e.target.value}) }></textarea>
            <Button type="primary" onClick={postilStore.save} style={{float: 'right',position: 'relative'}}>批注</Button>
          </div>
          <i className="icon-close" onClick={postilStore.cancelEdit}></i>
        </div>}
        {list.length > 0 &&
          <div id="postilBox">
            {toJS(list).map((item) => {
              if(item.datetime.indexOf("T") > 0 || item.datetime.indexOf("Z") > 0  ){
                item.datetime = item.datetime.replace("T"," ").replace("Z"," ")
              }
              return (
                <div className={classnames('postilItem', {'postilItem-active' : chooseItemIds.includes(item.id)})} onClick={() => postilStore.chooseItem(item.id) }>
                  <div className="headPortrait">
                    <span className="odoc_author">{item.author}</span>
                    <i className="icon-close" onClick={(e) => {
                        setTimeout(() => deletePostil(), 0);
                      }}/>
                    <div className="postilTime">{item.datetime}</div>
                  </div>
                  <div className="postilContent" onClick={(e) => {
                    // e.stopPropagation();
                    // postilStore.edit(item.id);
                  }}>
                    <div className="postilText">{item.text}</div>
                  </div>
                </div>
              );
            })}
          </div>
        }
        <Modal // fix: 多Modal弹框 (循环内部多次渲染了modal) -- 暂时先自定义了样式(优化可以找组件支持confirmModal)
          className="wea-odoc-modal-confirm"
          title={(
            <span className="wea-odoc-modal-confirm-title">
              <i class="icon-coms-Prompt ant-confirm-header-icon"></i>
              <span class="ant-confirm-title wea-f14">{getLabel(131329,'信息确认')}</span>
            </span>
          )}
          maskClosable={false}
          visible={delModalVisible}
          okText={getLabel(826,'确定')}
          cancelText={getLabel(201,'取消')}
          onOk={() => postilStore.del(delIds)}
          onCancel={() => setState({ delModalVisible: false })}
        >
          {getLabel(15097,'确定要删除吗？')}
        </Modal>
        <Modal // fix: 多Modal弹框 (循环内部多次渲染了modal) -- 暂时先自定义了样式(优化可以找组件支持confirmModal)
          className="wea-odoc-modal-confirm"
          title={(
            <span className="wea-odoc-modal-confirm-title">
              <i class="icon-coms-Prompt ant-confirm-header-icon"></i>
              <span class="ant-confirm-title wea-f14">{getLabel(131329,'信息确认')}</span>
            </span>
          )}
          maskClosable={false}
          visible={delPosModalVisible}
          okText={getLabel(826,'确定')}
          cancelText={getLabel(201,'取消')}
          onOk={() => isDelPostil ? doDeletePostil(chooseItemIds) : dodeleteAllPostil()}
          onCancel={() => setState({ delPosModalVisible: false })}
        >
          {getLabel(15097,'确定要删除吗？')}
        </Modal>
      </div>
    );
  }

  checkBlur = (e) => {
    const {postilStore} = this.props, {isEdit, textareaRef} = postilStore, textareaDom = ReactDOM.findDOMNode(textareaRef);
    if (textareaDom && !textareaDom.contains(e.target) && isEdit) {
      postilStore.save();
    }
  }
}